WD PLUS 2020-11 (dashboard)

4. Narzędzia developerskie (Moduł)

4.6. NPM - budujemy własny task runner

Zadanie: projekt z task runnerem

W tym miniprojekcie zakodujesz prosty landing page, używając task runnera i Gita.

Pamiętaj, aby od początku poprawnie nazywać commity i trzymać się dobrych praktyk użycia Gita.

Twoim zadaniem jest:

  1. Utworzenie nowego projektu i zainicjalizowanie w nim Gita.
  2. Umieszczenie w katalogu projektu pliku package.json z modułu powyżej.
  3. Uruchomienie task runnera komendą npm run init-project, a następnie trybu watch komendą npm run watch.
  4. Zakodowanie layoutu na podstawie grafiki (linki poniżej).
  5. Uzupełnienie treści — mogą to być "wypełniacze", np. z Lipsum lub LoremPixel.
  6. Zachowanie dobrych praktyk przedstawionych w dotychczasowych treściach.
  7. Przystosowanie strony do odpowiedniego wyświetlania na urządzeniach mobilnych (RWD).

Pamiętaj, że wszystkie style umieszczasz w pliku sass/style.scss (nawet jeżeli piszesz w konwencji CSS)! Do formatu .css ma je przekształcić Twój task runner.

Do projektu możesz podłączyć grid Bootstrapa (kliknij, aby pobrać paczkę z plikiem CSS) - umieść go w katalogu vendor/ i podepnij w pliku HTML przed plikiem style.css. Grid daje Ci możliwość korzystania ze stylów Bootstrapa dla klas container, container-fluid, row, kolumn (ze wszystkimi klasami responsywnymi, np. col-sm-, col-md-, etc.) oraz z offsetu, ale nie zawiera innych komponentów ani klas pomocniczych. Nie podłączaj całego Bootstrapa — stwórz poprawną strukturę za pomocą grida, a elementy ostyluj własnoręcznie.

Możesz pobrać design strony w formacie:

Z życia developera: framework a zgodność z designem

Czasem bywa tak, że klient przychodzący z projektem do zakodowania życzy sobie, by użyć konkretnego frameworka HTML/CSS, na przykład Bootstrapa. W czasie pracy developer stwierdza jednak, że design nie pasuje do grida (np. elementy nie są takiej szerokości, jak bootstrapowe kolumny). Co wtedy? Trzeba sobie radzić. Wielu klientów przystaje na taką umowę, że developer użyje frameworka, żeby rozmieścić elementy na stronie (np. po trzy w rzędzie), ale gotowa strona nie będzie co do piksela zgodna z projektem graficznym (np. szerokości elementów lub odległości między nimi będą się nieznacznie różnić).

Załóż, że w tym projekcie klient zgodził się na taką opcję. :)

Po skończonej pracy wklej poniżej linka do repozytorium i wyślij Mentorowi.

;